{% load form_filters %}

<div class="form-group mb-3">
    <label for="field_{{ field.id }}">{{ field.label }}</label>
    
    {% if field.field_type == 'text' %}
        <input type="text" class="form-control" id="field_{{ field.id }}" 
               name="field_{{ field.id }}" {% if field.required %}required{% endif %}>
    
    {% elif field.field_type == 'number' %}
        <input type="number" class="form-control" id="field_{{ field.id }}"
               name="field_{{ field.id }}" {% if field.required %}required{% endif %}>
    
    {% elif field.field_type == 'select' %}
        <select class="form-control" id="field_{{ field.id }}" name="field_{{ field.id }}"
                {% if field.required %}required{% endif %}>
            <option value="">请选择...</option>
            {% with options=field.options|default:'' %}
                {% for option in options|split:"," %}
                    <option value="{{ option|trim }}">{{ option|trim }}</option>
                {% endfor %}
            {% endwith %}
        </select>
    
    {% elif field.field_type == 'radio' %}
        {% with options=field.options|default:'' %}
            {% for option in options|split:"," %}
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="field_{{ field.id }}"
                           id="field_{{ field.id }}_{{ forloop.counter }}" 
                           value="{{ option|trim }}"
                           {% if field.required %}required{% endif %}>
                    <label class="form-check-label" for="field_{{ field.id }}_{{ forloop.counter }}">
                        {{ option|trim }}
                    </label>
                </div>
            {% endfor %}
        {% endwith %}
    
    {% elif field.field_type == 'checkbox' %}
        {% with options=field.options|default:'' %}
            {% for option in options|split:"," %}
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="field_{{ field.id }}"
                           id="field_{{ field.id }}_{{ forloop.counter }}" 
                           value="{{ option|trim }}">
                    <label class="form-check-label" for="field_{{ field.id }}_{{ forloop.counter }}">
                        {{ option|trim }}
                    </label>
                </div>
            {% endfor %}
        {% endwith %}
    
    {% elif field.field_type == 'image' %}
        <div class="image-upload-container">
            <div class="mb-2">
                <input type="file" class="form-control" id="field_{{ field.id }}"
                       name="field_{{ field.id }}" accept="image/*" multiple
                       {% if field.required %}required{% endif %}>
            </div>
            <div class="image-preview-container d-flex flex-wrap gap-2" id="preview_{{ field.id }}">
                <!-- 预览区域 -->
            </div>
            <div class="mt-2">
                <small class="text-muted">
                    {% if field.required %}
                        请至少上传一张照片
                    {% else %}
                        可以上传多张照片
                    {% endif %}
                    <br>
                    支持的格式：JPG、PNG、GIF等图片格式
                </small>
            </div>
        </div>

        <script>
        document.getElementById('field_{{ field.id }}').addEventListener('change', function(e) {
            const previewContainer = document.getElementById('preview_{{ field.id }}');
            const maxFileSize = 5 * 1024 * 1024; // 5MB
            const files = e.target.files;
            
            // 清空预览区域
            previewContainer.innerHTML = '';
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (file.type.startsWith('image/')) {
                    if (file.size > maxFileSize) {
                        alert(`文件 ${file.name} 超过5MB，请选择更小的文件`);
                        continue;
                    }
                    
                    const reader = new FileReader();
                    const previewWrapper = document.createElement('div');
                    previewWrapper.className = 'position-relative';
                    
                    reader.onload = function(e) {
                        previewWrapper.innerHTML = `
                            <div class="position-relative" style="width: 150px; height: 150px;">
                                <img src="${e.target.result}" class="img-thumbnail" 
                                     style="width: 100%; height: 100%; object-fit: cover;"
                                     title="${file.name}">
                                <button type="button" class="btn-close position-absolute top-0 end-0 m-1" 
                                        style="background-color: white;" 
                                        onclick="removeImage(this, '${file.name}')"></button>
                                <small class="position-absolute bottom-0 start-0 m-1 text-white bg-dark px-1 rounded">
                                    ${(file.size / 1024 / 1024).toFixed(1)}MB
                                </small>
                            </div>
                        `;
                    };
                    
                    reader.readAsDataURL(file);
                    previewContainer.appendChild(previewWrapper);
                }
            }
        });

        function removeImage(button, fileName) {
            const previewWrapper = button.closest('.position-relative');
            const input = document.getElementById('field_{{ field.id }}');
            const dt = new DataTransfer();
            
            // 保留其他文件
            for (let i = 0; i < input.files.length; i++) {
                const file = input.files[i];
                if (file.name !== fileName) {
                    dt.items.add(file);
                }
            }
            
            input.files = dt.files;
            previewWrapper.remove();
            
            // 如果是必填且没有文件了，添加required属性
            if (input.hasAttribute('required') && input.files.length === 0) {
                input.required = true;
            }
        }
        </script>
    {% endif %}
</div> 